import React from "react";
import {ModalForm, ProCard, ProFormRadio, ProFormSelect} from "@ant-design/pro-components";
import {Space, Tag} from "antd";

type  Props = {
  onOpenChange: (open: boolean) => void,
  open: boolean
}

const CdAdd: React.FC<Props> = (props) => {
  return (
    <>
      <ModalForm
        title={'创建部署'}
        onOpenChange={props.onOpenChange}
        open={props.open}
        modalProps={{destroyOnClose: true}}
        labelAlign={'left'}
        onFinish={async () => {
          console.log('finish')
          return true
        }}
      >
        <ProCard>
          <ProFormSelect name='appName' label={'应用'} options={[{label: 'app1'}, {label: 'app2'}]}
                         rules={[{required: true}]}/>
          <ProFormRadio.Group name='env' label={'选择环境'} rules={[{required: true}]} options={[
            {label: '开发', value: 'dev'},
            {label: '测试', value: 'test'},
            {label: '预发', value: 'pre'},
            {label: '生产', value: 'prod'},
          ]}/>
          <ProFormSelect name='version'
                         rules={[{required: true}]}
                         label={'选择镜像版本'}
                         valueEnum={{
                           '1.0.0': {
                             text: <Space>
                               <text>abc/img:1.0.0</text>
                               <Tag color={"success"}>开发</Tag> <Tag color={"success"}>测试</Tag></Space>,
                             status: 'Default',
                             disabled: true
                           },
                           '2.0.0': {text: 'abc/img:2.0.0', status: 'Processing'},
                         }}
                         showSearch={true}
          />

        </ProCard>
      </ModalForm>

    </>
  )
}

export default CdAdd
